<template>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-if="subType == 1"
    customClass="customClass1"
  >
    <template v-slot:container>
      <div
        v-for="item in 4"
        :key="item"
        :class="`class1-rect class1-rect-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 2"
    customClass="customClass2"
    itemCustomClass="itemCustomClass2"
  >
    <template v-slot:container>
      <div
        v-for="item in 2"
        :key="item + '`class2-line'"
        :class="`class2-line class2-line-${item}`"
      ></div>
      <div
        v-for="item in 3"
        :key="item + '`class2-rect'"
        :class="`class2-rect class2-rect-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 3"
    customClass="customClass3"
  >
    <template v-slot:container>
      <div class="class3-line"></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 4"
    customClass="customClass4"
  >
    <template v-slot:container>
      <div class="class4-line-top"></div>
      <div class="class4-line-left"></div>
      <div
        v-for="item in 3"
        :key="item + 'class4'"
        :class="`class4-rect class4-rect-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 5"
    customClass="customClass5"
  >
    <template v-slot:container>
      <div
        v-for="item in 4"
        :key="item + 'class5'"
        :class="`class5-rect class5-rect-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 6"
    customClass="customClass6"
  >
    <template v-slot:container>
      <div class="class6-line"></div>
      <div class="class6-rect class6-rect-1"></div>
      <div class="class6-rect class6-rect-2"></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 7"
    customClass="customClass7"
  >
    <template v-slot:container>
      <div class="class7-line-top"></div>
      <div class="class7-line-bottom"></div>
      <div
        v-for="item in 4"
        :key="item + 'class7-short-line'"
        :class="`class7-short-line class7-short-line-${item}`"
      ></div>
      <div
        v-for="item in 4"
        :key="item + 'class7-circle'"
        :class="`class7-circle class7-circle-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 8"
    customClass="customClass8"
  >
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 9"
    customClass="customClass9"
  >
    <template v-slot:container>
      <div
        v-for="item in 4"
        :key="item + 'class9'"
        :class="`class9-rect class9-rect-${item}`"
      ></div>
    </template>
  </SubPanel>
  <SubPanel
    v-bind="$attrs"
    v-on="$listeners"
    v-else-if="subType == 10"
    customClass="customClass10"
  >
    <template v-slot:container>
      <div class="class10-right-border"></div>
      <div class="class10-bottom-line"></div>
      <div class="class10-rect-1"></div>
      <div class="class10-rect-2"></div>
    </template>
  </SubPanel>
</template>
<script>
import SubPanel from "./component";
export default {
  name: "data-v-subPanel",
  components: {
    SubPanel,
  },
  props: {
    subType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
};
</script>